<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="module">
        // 轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
        import * as THREE from 'three';
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.position.set(2, 200, 20)

        camera.lookAt(0, 0, 0);


        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        // 创建场景
        const scene = new THREE.Scene();
        // scene.background = new THREE.Color(0x000000);

        const gridHelper = new THREE.GridHelper(100);
        scene.add(gridHelper);

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // 添加物体
        // 创建 cube1
        const cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
        const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);
        cube.position.set(0, 0, 0);



        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();


    </script>
</body>

</html>